<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }
    
        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="/static/js/babylon.js"></script>
<script src="/static/js/babylon.inspector.bundle.js"></script>
<script src="/static/js/babylon.loader.min.js"></script>
<script src="/static/js/babylon-helper.js"></script>
<script>
    var canvas = document.getElementById('renderCanvas');
    var engine = new BABYLON.Engine(canvas, true),
        camera,
        scene,
        light;

    var easingFunction = new BABYLON.SineEase();
    easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

    main();

    async function createScene() {
        scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 90, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);

        var dirLight1 = new BABYLON.DirectionalLight("dirLight1", new BABYLON.Vector3(0, 0, 0), scene);
        dirLight1.direction = new BABYLON.Vector3(-0.5, 0.38, 0.67);
        dirLight1.position = camera.position;
        dirLight1.parent = camera;

        
        await BABYLON.SceneLoader.AppendAsync("https://models.babylonjs.com/Demos/weaponsDemo/meshes/moltenDagger.glb")

        const daggerHandle = scene.getMeshByName("daggerHandle_low");
        const daggerBlade = scene.getMeshByName("daggerBlade_low");
        const daggerGem = scene.getMeshByName("daggerGem_low");
        const daggerParent = daggerHandle.parent;

        var daggerHandleMat = new BABYLON.NodeMaterial("daggerHandleMat", scene, { emitComments: false });
        var daggerGemMat = new BABYLON.NodeMaterial("daggerGemMat", scene, { emitComments: false });
        var daggerBladeMat = new BABYLON.NodeMaterial("daggerBladeMat", scene, { emitComments: false });

        await daggerHandleMat.loadAsync("https://models.babylonjs.com/Demos/weaponsDemo/shaders/daggerHandleMat.json");
        await daggerBladeMat.loadAsync("https://models.babylonjs.com/Demos/weaponsDemo/shaders/daggerBladeMat.json");
        await daggerGemMat.loadAsync("https://models.babylonjs.com/Demos/weaponsDemo/shaders/daggerGemMat.json");

        daggerHandleMat.build(false);
        daggerHandle.material = daggerHandleMat;

        daggerBladeMat.build(false);
        daggerBlade.material = daggerBladeMat;

        daggerGemMat.build(false);
        daggerGem.material = daggerGemMat;


        const daggerDiffuseTex = new BABYLON.Texture("https://models.babylonjs.com/Demos/weaponsDemo/textures/moltenDagger_diffuse.png", scene, false, false);
        const daggerSpecularTex = new BABYLON.Texture("https://models.babylonjs.com/Demos/weaponsDemo/textures/moltenDagger_specular.png", scene, false, false);
        const daggerGlossTex = new BABYLON.Texture("https://models.babylonjs.com/Demos/weaponsDemo/textures/moltenDagger_gloss.png", scene, false, false);
        const daggerEmissiveTex = new BABYLON.Texture("https://models.babylonjs.com/Demos/weaponsDemo/textures/moltenDagger_emissive.png", scene, false, false);
        const daggerMaskTex = new BABYLON.Texture("https://models.babylonjs.com/Demos/weaponsDemo/textures/moltenDagger_mask.png", scene, false, false);

        var daggerBladeDiffuse = daggerBladeMat.getBlockByName("diffuseTexture");
        var daggerBladeSpecular = daggerBladeMat.getBlockByName("specularTexture");
        var daggerBladeGloss = daggerBladeMat.getBlockByName("glossTexture");
        var daggerBladeEmissive = daggerBladeMat.getBlockByName("emissiveTexture");
        var daggerBladeMask = daggerBladeMat.getBlockByName("maskTexture");
        var daggerBladeAnim = daggerBladeMat.getBlockByName("animTexture");
        var daggerHandleDiffuse = daggerHandleMat.getBlockByName("diffuseTexture");
        var daggerHandleSpecular = daggerHandleMat.getBlockByName("specularTexture");
        var daggerHandleGloss = daggerHandleMat.getBlockByName("glossTexture");
        var daggerGemEmissive = daggerGemMat.getBlockByName("emissiveTexture");

        daggerBladeDiffuse.texture = daggerDiffuseTex;
        daggerBladeSpecular.texture = daggerSpecularTex;
        daggerBladeGloss.texture = daggerGlossTex;
        daggerBladeEmissive.texture = daggerEmissiveTex;
        daggerBladeMask.texture = daggerMaskTex;
        daggerBladeAnim.texture = daggerMaskTex;
        daggerHandleDiffuse.texture = daggerDiffuseTex;
        daggerHandleSpecular.texture = daggerSpecularTex;
        daggerHandleGloss.texture = daggerGlossTex;
        daggerGemEmissive.texture = daggerEmissiveTex;

        var daggerBladeGlowMask = daggerBladeMat.getBlockByName("glowMask");
        var daggerGemGlowMask = daggerGemMat.getBlockByName("glowMask");

        // daggerBladeGlowMask.value = 0.0;
        // daggerGemGlowMask.value = 0.0;


        var daggerGemParams = {
            "emissiveParam": daggerGemMat.getBlockByName("emissiveStrength"),
            "glowStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 90, value: 1.0}
            ],
            "glowFinishKeys": [
                {frame: 0, value: 1.0},
                {frame: 120, value: 0.0}
            ]
        };

        var daggerBladeParams = {
            "emissiveParam": daggerBladeMat.getBlockByName("emissiveStrength"),
            "heatLevelParam": daggerBladeMat.getBlockByName("heatLevel"),
            "charLevelParam": daggerBladeMat.getBlockByName("charLevel"),
            "uOffsetParam": daggerBladeMat.getBlockByName("uOffset"),
            "flickerStrengthParam": daggerBladeMat.getBlockByName("flickerStrength"),
            "glowStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 20, value: 0.0},
                {frame: 90, value: 1.0}
            ],
            "glowLoopKeys": [
                {frame: 0, value: 1.0},
                {frame: 70, value: 0.75},
                {frame: 140, value: 1.0}
            ],
            "glowFinishKeys": [
                {frame: 0, value: 0.75},
                {frame: 90, value: 0.0}
            ],
            "heatStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 40, value: 0.0},
                {frame: 160, value: 0.67}
            ],
            "heatFinishKeys": [
                {frame: 0, value: 0.67},
                {frame: 40, value: 0.67},
                {frame: 160, value: 0.0}
            ],
            "charStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 80, value: 0.0},
                {frame: 160, value: 1.0}
            ],
            "charFinishKeys": [
                {frame: 0, value: 1.0},
                {frame: 60, value: 1.0},
                {frame: 160, value: 0.0}
            ],
            "animStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 180, value: 1.0}
            ],
            "animStopKeys": [
                {frame: 0, value: 0.0},
                {frame: 10, value: 0.0}
            ],
            "flickerStrengthStartKeys": [
                {frame: 0, value: 0.0},
                {frame: 40, value: 0.0},
                {frame: 160, value: 0.65}
            ],
            "flickerStrengthFinishKeys": [
                {frame: 0, value: 0.65},
                {frame: 40, value: 0.65},
                {frame: 160, value: 0.0}
            ]
        };


        var gl = new BABYLON.GlowLayer("glow", scene, { 
            mainTextureFixedSize: 1024,
            blurKernelSize: 64
        });
        gl.intensity = 2;

        // glow mask switch for node material emissive texture to be accessible to the glow layer
        gl.referenceMeshToUseItsOwnMaterial(daggerBlade);
        // gl.referenceMeshToUseItsOwnMaterial(daggerGem);

    //    daggerBladeGlowMask.value = 0;

        // gl.onBeforeRenderMeshToEffect.add(() => {
        //     daggerBladeGlowMask.value = 1.0;
        // });
        // gl.onAfterRenderMeshToEffect.add(() => {
        //     daggerBladeGlowMask.value = 0.0;
        // });

        // playAnimation(daggerGemParams.emissiveParam, "value", daggerGemParams.glowStartKeys, false, true, false);
        // playAnimation(daggerBladeParams.emissiveParam, "value", daggerBladeParams.glowStartKeys, false, true, true, daggerBladeParams.emissiveParam, "value", daggerBladeParams.glowLoopKeys, true, true);
        playAnimation(daggerBladeParams.heatLevelParam, "value", daggerBladeParams.heatStartKeys, false, true, false);
        // playAnimation(daggerBladeParams.charLevelParam, "value", daggerBladeParams.charStartKeys, false, true, false);
        // playAnimation(daggerBladeParams.uOffsetParam, "value", daggerBladeParams.animStartKeys, true, false, false);
        // playAnimation(daggerBladeParams.flickerStrengthParam, "value", daggerBladeParams.flickerStrengthStartKeys, false, true, false);


        return scene;
    }

    async function main() {
        scene = await createScene();
        scene.debugLayer.show();

        // BabylonHelper.showAxis(scene, 10);

        engine.runRenderLoop(function() {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    }
        
    function playAnimation(parameter, animValue, animKeys, animLooping, useEasing, linkAnimation, linkParameter, linkAnimValue, linkAnimKeys, linkAnimLooping, linkUseEasing) {

        // create animation clips
        var linkParamAnim = null;
        var paramAnim = new BABYLON.Animation("paramAnim", animValue, 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        if (linkAnimation) {
            linkParamAnim = new BABYLON.Animation("linkParamAnim", linkAnimValue, 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        }

        // set up easing
        if (useEasing) {
            paramAnim.setEasingFunction(easingFunction);
        }
        if (linkAnimation && linkUseEasing) {
            linkParamAnim.setEasingFunction(easingFunction);
        }

        // create animation
        scene.stopAnimation(parameter);
        if (linkAnimation) {
            paramAnim.setKeys(animKeys);
            linkParamAnim.setKeys(linkAnimKeys);
            scene.beginDirectAnimation(parameter, [paramAnim], 0, animKeys[animKeys.length - 1].frame, animLooping, 1, function() {
                scene.stopAnimation(linkParameter);
                scene.beginDirectAnimation(linkParameter, [linkParamAnim], 0, linkAnimKeys[linkAnimKeys.length - 1].frame, linkAnimLooping, 1);
            });
        } else {
            paramAnim.setKeys(animKeys);
            scene.beginDirectAnimation(parameter, [paramAnim], 0, animKeys[animKeys.length - 1].frame, animLooping, 1);
        }
    }


</script>
</body>
</html>